<script setup>

// 路径导航
import {onMounted, reactive, ref} from "vue";
import {GENDER_OPTIONS, PROVINCE_OPTIONS, RULE, STUDENT_STATUS_TAG_OPTIONS} from "../../../const/index.js";
import {ElMessage} from "element-plus";
import router from "../../../router/index.js";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {listApi, updateApi} from "../../../api/axios.js";
import {getResponseData} from "../../../request/index.js";
import {UPLOAD_AVATAR_URL} from "../../../api/student.js";
import MyUpload from "../../../components/MyUpload.vue";

// 学生记录
let student = JSON.parse(sessionStorage.getItem('row'));

// 学校下拉菜单
let schoolOptions = ref([]);
// 班级下拉菜单
let clubOptions = ref([]);
// 负责销售下拉菜单
let salesmanOptions = ref([]);


// 路径导航
const navItems = [
  {icon: 'Platform', label: '班级管理', url: '/Student'},
  {icon: 'Avatar', label: '学员列表', url: '/Student'},
  {icon: 'Plus', label: '修改学生信息'},
];

// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '学生编号', prop: 'number', span: 8, disabled: true},
  {label: '学生姓名', prop: 'realname', span: 8, required: true},
  {label: '所在班级', prop: 'fkClubId', span: 8, required: true, type: 'select', options: clubOptions.value},
  {label: '手机号码', prop: 'phone', span: 8, required: true},
  {label: '微信号码', prop: 'wechat', span: 8, required: true},
  {label: '身份证号', prop: 'idcard', span: 8, required: true},
  {label: '学生性别', prop: 'gender', span: 8, required: true, type: 'select', options: GENDER_OPTIONS},
  {label: '学生年龄', prop: 'age', span: 8, required: true, type: 'number'},
  {label: '所在省份', prop: 'province', span: 8, required: true, type: 'select', options: PROVINCE_OPTIONS},
  {label: '负责销售', prop: 'fkSalesmanId', span: 8, required: true, type: 'select', options: salesmanOptions.value},
  {label: '急联姓名', prop: 'emergencyName', required: true, span: 8,},
  {label: '急联电话', prop: 'emergencyPhone', required: true, span: 8,},
  {label: '所在学校', prop: 'fkSchoolId', span: 8, required: true, type: 'select', options: schoolOptions.value},
  {label: '学生状态', prop: 'status', span: 8, type: 'select', options: STUDENT_STATUS_TAG_OPTIONS},
  {label: '入学日期', prop: 'studyDate', span: 8, type: 'datetime', required: true},
  {label: '现居住地', prop: 'address', type: 'textarea', rows: 2, required: true},
  {label: '学生描述', prop: 'info', type: 'textarea'},
]);
let params = reactive(student);
let rules = {
  realname: RULE.REALNAME,
  phone: RULE.PHONE,
  idcard: RULE.IDCARD,
  province: RULE.PROVINCE,
  emergencyName: RULE.REALNAME,
  emergencyPhone: RULE.PHONE,
  address: RULE.ADDRESS,
  info: RULE.INFO
};


/* ======================================== 修改成功后 ================================================ */

function updateSuccess() {
  ElMessage.success('修改记录成功');
  setTimeout(() => router.push('/Student'), 1000);
}

/* =================================== 加载函数 ===================================== */

onMounted(async () => {

  // 查询所有学校，并添加到下拉菜单里面去
  Object.values(getResponseData(await listApi({module: 'school'}))).forEach(school => {
    schoolOptions.value.push({label: school['title'] + school['college'] + school['major'] + school['clazz'],
      value: school['id']});
  });

  // 查询所有班级，并添加到下拉菜单里面去
  Object.values(getResponseData(await listApi({module: 'club'}))).forEach(club => {
    clubOptions.value.push({label: club['title'], value: club['id']});
  });

  // 查询所有负责销售，并添加到下拉菜单里面去
  Object.values(getResponseData(await listApi({module: 'emp'}))).forEach(emp => {
    salesmanOptions.value.push({label: emp['realname'], value: emp['id']});
  });

});

</script>

<template>
  <my-nav :items="navItems"/>
  <el-row :gutter="30" class="student-update-body">
    <el-col :span="16">
      <el-card class="student-update-card" header="修改学生信息">
        <my-form type="update"
                 :items="items"
                 :params="params"
                 :rules="rules"
                 :api="updateApi"
                 :args="{module: 'student'}"
                 :callback="updateSuccess"/>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card header="上传学生头像">
        <my-upload :url="UPLOAD_AVATAR_URL + '/' + student['id']"
                   name="avatarFile"
                   :callback="updateSuccess"
                   :auto-upload="true"/>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.student-update-body {
  margin: 65px auto 0; // 外边距
}
</style>